<template>
  <div align="center" style="margin-left: 30px;margin-top: 20px;">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="formInline.roleName" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input v-model="formInline.roleKey" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="角色状态" clearable>
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
        <el-button size="small" @click="onClose" style="margin-right: 50px;">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" size="small" @click="toSaveRole" plain>新增</el-button>
    <el-button type="success" size="small" :disabled="single" @click="toCheckUpdateRole" plain>修改</el-button>
    <el-button type="danger" size="small" @click="delCheckRole" plain>删除</el-button>
    <el-button type="success" size="small" @click="toRoleCharts" plain >报表</el-button>
    <el-button type="warning" size="small" @click="onClose" plain style="margin-right: 1000px;">导出</el-button>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;
               margin-right: 50px;"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="roleId"
          label="角色编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="角色名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="roleKey"
          label="权限字符"
          width="120">
      </el-table-column>
      <el-table-column
          prop="roleSort"
          label="显示顺序"
          width="120">
      </el-table-column>
      <el-table-column
          label="状态"
          width="120">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status=='0'?true:false"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeRoleStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          width="420">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="320">
        <template slot-scope="scope">
        <el-button v-show="scope.row.roleName!='超级管理员'" type="text" size="small" @click="toUpdateRole(scope.row)" plain>修改</el-button>
        <el-button v-show="scope.row.roleName!='超级管理员'" type="text" size="small" @click="delRole(scope.row)" plain>删除</el-button>
          <el-tooltip placement="bottom"  effect="light" >
            <div slot="content">
              <el-button  type="text" size="mini" style="color: #2c3e50"  @click="toUpdateRoleKey(scope.row)" plain>数据权限</el-button>
              <br/>
              <el-button  type="text" size="mini" style="color: #2c3e50" @click="toDistUser(scope.row.roleId)" plain>分配用户</el-button>
            </div>
            <el-button v-show="scope.row.roleName!='超级管理员'" type="text" size="small" style="margin-left: 20px;">更多</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        @current-change="toNewPage"
        :current-page="formInline.pageNum"
        :page-size="formInline.pageSize"
        layout="prev, pager, next"
        :total="total">
    </el-pagination>

<!--    添加/修改-->
    <el-dialog :title="title" style="width: 1000px;margin-left: 300px;" :visible.sync="dialogFormVisible" append-to-body>
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.roleName" autocomplete="off" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="权限字符" :label-width="formLabelWidth">
          <el-input v-model="form.roleKey" autocomplete="off" placeholder="请输入权限字符"></el-input>
        </el-form-item>
        <el-form-item label="角色顺序" :label-width="formLabelWidth">
          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="form.status" label="0"
                    style="margin-left: 30px">正常</el-radio>
          <el-radio v-model="form.status" label="1">停用</el-radio>
        </el-form-item>
        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
          <el-tree
              class="tree-border"
              :data="menuOptions"
              show-checkbox
              ref="menu"
              v-model="form.ids"
              node-key="value"
              :check-strictly="!form.menuCheckStrictly"
              empty-text="加载中，请稍候"
              :props="defaultProps"
          ></el-tree>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateRole">确 定</el-button>
      </div>
    </el-dialog>

<!--    用户数据权限管理-->
    <el-dialog title="用户数据权限管理" style="width: 1000px;margin-left: 300px;" :visible.sync="dialogFormVisible2" append-to-body>
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.roleName" autocomplete="off" placeholder="请输入角色名称" readonly disabled></el-input>
        </el-form-item>
        <el-form-item label="权限字符" :label-width="formLabelWidth">
          <el-input v-model="form.roleKey" autocomplete="off" placeholder="请输入权限字符" readonly disabled></el-input>
        </el-form-item>
        <el-form-item label="权限范围" :label-width="formLabelWidth">
          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
            <el-option
                v-for="item in dataScopeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
          <el-tree
              class="tree-border"
              :data="DeptOptions"
              show-checkbox
              ref="dept"
              node-key="value"
              :check-strictly="!form.deptCheckStrictly"
              empty-text="加载中，请稍候"
              :props="defaultProps"
          ></el-tree>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: 'RoletView',
  data(){
    return{
      ids:[],
      // 数据范围选项
      dataScopeOptions: [
        {
          value: "1",
          label: "全部数据权限"
        },
        {
          value: "2",
          label: "自定数据权限"
        },
        {
          value: "3",
          label: "本部门数据权限"
        },
        {
          value: "4",
          label: "本部门及以下数据权限"
        },
        {
          value: "5",
          label: "仅本人数据权限"
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      menuOptions:[],
      formLabelWidth:'100px',
      title:'',
      dialogFormVisible:false,
      form:{
        menuCheckStrictly: true,
        deptCheckStrictly:true,
        haveIds:[],
      },
      formInline:{
        pageNum:1,
        pageSize:3,
      },
      total:0,
      value1:'',
      tableData:[],
      menu: {
        isOpen: false,
        current: null,
        lastScrollPosition: 0,
        placement: 'bottom'
      },
      dept: {
        isOpen: false,
        current: null,
        lastScrollPosition: 0,
        placement: 'bottom'
      },
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      dialogFormVisible2:false,
      DeptOptions:[],
      multipleSelection:[],
      single:true,
    }
  },
  methods:{
    saveOrUpdateRole(){
      console.log(this.form.ids)
    },
    //跳转报表页面
    toRoleCharts(){
      this.$router.push("roleCharts");
    },
    //从多选框修改
    toCheckUpdateRole(){
      this.form=this.multipleSelection[0];
      this.dialogFormVisible=true;
    },
    //多选框选择
    handleSelectionChange(val){
      this.multipleSelection = val;
      this.single=this.multipleSelection.length!=1;
    },
    //分配用户
    toDistUser(id){
      this.$router.replace({name:'distUser',query:{id:id}});
    },
    //选择角色权限范围触发
    dataScopeSelectChange(value) {
      if(value !== '2') {
        this.$refs.dept.setCheckedKeys([]);
      }
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      if (type == 'menu') {
        let treeList = this.menuOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
        }
      } else if (type == 'dept') {
        let treeList = this.deptOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
        }
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      if (type == 'menu') {
        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
      } else if (type == 'dept') {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
      }
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value, type) {
      if (type == 'menu') {
        this.form.menuCheckStrictly = value ? true: false;
      } else if (type == 'dept') {
        this.form.deptCheckStrictly = value ? true: false;
      }
    },
    //从多选框删除(批量删除)
    delCheckRole(){
      if (this.multipleSelection[0].roleName=='超级管理员'){
        this.$message.error("不允许操作超级管理员角色");
      }else {
         this.multipleSelection.map(r=>{
           this.form.haveIds.push(r.roleId)
         })
        this.axios.post("http://localhost:8181/role/bathDelRole",this.form).then(()=>{
          this.$message.success("删除成功")
          window.setTimeout(function (){
            window.location.reload();
          },500)

        })
      }
    },
    delRole(row){
      if (row.roleName=='超级管理员'){
        this.$message.error("不允许操作超级管理员角色");
      }else {
        this.axios.delete("http://localhost:8181/role/delRole?id="+row.roleId).then(()=>{
          this.$message.success("删除成功");
          window.setTimeout(function (){
            window.location.reload();
          },500)

        })
      }
    },
    toSaveRole(){
      this.form={
        roleSort:0,
        status:'0',
      };
      this.menuNodeAll=false;
      this.menuExpand=false;
      this.title='角色添加';
      this.dialogFormVisible=true;
    },
    //分配数据权限
    toUpdateRoleKey(row){
      this.form=row;
      this.dialogFormVisible2=true;
    },
    toUpdateRole(row){
      this.form=row;

      this.title='角色修改';
      this.dialogFormVisible=true;
    },
    toNewPage(newPage){
      this.formInline.pageNum=newPage;
      this.onSubmit();
    },
    onSubmit(){
      this.axios.post("http://localhost:8181/role/getRoleList",this.formInline).then(r=>{
        this.tableData=r.data.data.list;
        this.total=r.data.data.total;
      })
      this.formInline.pageNum=1;
    },
    onClose(){
      this.formInline={
      }
      this.menuNodeAll=false;
      this.menuExpand=false;
    },
    changeRoleStatus(row){
      if(row.roleName=='超级管理员'){
        this.$message.error("不允许操作超级管理员角色");
      }else {
        if(row.status=='0'){
          console.log(row.status);
          this.form=row;
          this.form.status='1';
          console.log("***"+this.form.status+"----");
          this.axios.post("http://localhost:8181/role/updateRoleStatusById",this.form).then(r=>{
            this.$message.success("停用成功");
            // window.location.reload();
          })

        }else if(row.status=='1'){
          console.log(row.status);
          this.form=row;
          this.form.status='0';
          console.log(this.form.status+"222222222");
          this.axios.post("http://localhost:8181/role/updateRoleStatusById",this.form).then(r=>{
            this.$message.success("启用成功");
            // window.location.reload();
          })

        }
      }
    },
    getMenuList(){
      this.axios.get("http://localhost:8181/role/getMenuList").then(r=>{
        this.menuOptions=r.data.data;
      })
    },
    getDeptList(){
      this.axios.get("http://localhost:8181/role/getDeptList").then(r=>{
        this.DeptOptions=r.data.data;
      })
    },
  },
  created() {
    this.getMenuList();
    this.onSubmit();
    this.getDeptList();
  }
}
</script>
